<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 信息发布</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/notice' }">信息发布</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="publish">
            </div> -->
            <div class="import">
                <el-row>
                    <el-button class="message publish" type="primary" @click="navigateToOtherPage">发布信息</el-button>
                </el-row>
                <span>信息标题：</span><el-input class="count" v-model="form.title" placeholder="请输入内容"
                    style="margin-right: 20px;"></el-input>
                <span>发布作者：</span><el-input class="count" v-model="form.author" placeholder="请输入内容"></el-input>
                <el-row>
                    <el-button class="messages" type="primary" @click="fetchData()">筛选</el-button>
                    <el-button class="messages" type="primary" @click="empty()">清空筛选条件</el-button>
                </el-row>
            </div>
            <el-table class="details" :data="tableData" border>
                <el-table-column prop="title" label="标题" width="width" align="center">
                </el-table-column>
                <el-table-column prop="content" label="发布内容" width="width" align="center">
                </el-table-column>
                <el-table-column prop="author" label="发布人" width="width" align="center">
                </el-table-column>
                <el-table-column prop="checkstatus" label="上/下架状态" width="width" align="center">
                    <template slot-scope="scope">
                        {{ getChineseStatus(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="checktime" label="发布时间" width="width" align="center">
                </el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="small">详情</el-button>
                        <el-button v-if="scope.row.status === 1" @click="handleToggleStatus(scope.row)" type="primary"
                            size="small">
                            上架
                        </el-button>
                        <el-button v-if="scope.row.status === 2" @click="handleToggleStatus(scope.row)" type="primary"
                            size="small">
                            下架
                        </el-button>
                        <el-button v-if="scope.row.editable" type="primary" size="small"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="pageNum"
                    :page-sizes="[1, 2, 3, 4]" :page-size="2" layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { RouterLink } from 'vue-router';
import { Postselectnotices } from '@/api/messagePublish'
import { Logicbutton } from '@/api/messagePublish'
import bus from '@/components/common/bus.js'
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 2,
            pageTotal: 0,
            form: {
                title: '',
                author: ''
            },
            input: '12',
            tableData: [],
            getdataItems: [],
        }
    },
    methods: {
        handleClick(row) {
            this.$router.push({ path: '/details', query: { id: row.id } });
        },


        //上架按钮事件下架按钮
        async handleToggleStatus(row) {
            if (row.checkstatus == 1) {
                let result = await Logicbutton({ id: row.id, status: row.status == 2 ? 1 : 2 })
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    row.editable = row.status === 1 ? false : true;
                    this.fetchData()
                }
            } else {
                this.$message({ message: '审核未通过', type: 'error' })
            }

        },
        navigateToOtherPage() {
            this.$router.push('/postmessage'); // 使用路径字符串进行跳转
        },
        handleEdit(row) {
            this.$router.push({
                path: '/postmessage',
                query: {
                    id: row.id
                }
            })
        },
        //页码改变时
        handlePageChange(val) {
            this.pageNum = val
            this.fetchData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.pageSize = val
            this.fetchData();
        },
        //获取表格数据
        async fetchData() {
            // 模拟异步请求获取数据
            let result = await Postselectnotices(this.$qs.stringify({
                id: 0,
                title: this.form.title,
                author: this.form.author,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: 0,
                checkstatus: 0
            }));
            if (result.code == 200) {
                this.tableData = result.data.list;
                // 更新editable属性的值
                this.tableData.forEach((item) => {
                    item.editable = item.status === 2; // 可编辑状态为下架时显示编辑按钮
                });
                this.pageTotal = result.data.total;
            }
        },
        //转换状态为中文
        getChineseStatus(val) {
            return val == 2 ? '上架' : '下架'
        },
        empty() {
            this.form = {}
            this.fetchData()
        }
    },
    mounted() {
        // this.fetchData(); // 在组件挂载时调用获取数据的方法

        this.fetchData()
    },


};
</script>

<style scoped>
.shell {
    width: 98%;
    height: 90%;
    margin: auto;
    margin-top: 10px;
    background-color: #FFFFFF;
}

.publish {
    display: flex;
    justify-content: space-between;
}

h2 {
    margin-top: 15px;
    margin-left: 20px;
}

.message {
    width: 105px;
    font-size: 16px;
    font-weight: 800;
    margin-right: 50px;
}

.import {
    width: 96%;
    margin: auto;
    padding: 20px;
}

.count {
    width: 280px;
    margin-top: 15px;
}

.publish {
    position: absolute;
    top: 0;
    right: 0;
}

.messages {
    margin-left: 50px;
    margin-top: 15px;
    font-weight: 800;
}

.details {
    width: 96%;
    margin: auto;
    margin-top: 20px;
}

.block {
    margin-left: 22px;
    margin-top: 15px;
}
</style>
